import React from 'react'
import { _,Container, Button,Breadcrumbs,Typography } from '@/core';
import Header from '@/components/Layout/Header'
import CCarsousel from '@/components/Layout/Carsousel'
import Footer from '@/components/Layout/Footer'
import Empty from '@/components/Layout/Empty'
import Menu from '@/components/Layout/Menu'
import Pagination from '@mui/material/Pagination';
import PaginationItem from '@mui/material/PaginationItem';

const getState = function(){
    let pathopt = _.getUrl();
    //
    return {
        menu:pathopt.menu,
        menuKey:pathopt.menuKey,
        cate:pathopt.cate,
        loading:false,
        list:[],
        count:0,
        page:1,
        pageSize:10
    }
}

class ListContent extends React.PureComponent {

    goDetail = (item)=>{
        return ()=>{
            //_.his.push({pathname:`/com/${item.categoryId}/${item.id}`})
            _.his.push(`/con/${item.slug}`)
        }
    }

    getList = (opt)=>{
        let st = this.state;
        let cate = st.cate?.join(',');
        if(cate){
            let pm = Object.assign({"cateList":cate},opt)
            pm.pageNum = pm.page;
            this.setState({loading:true})
            _.api("page.page",{params:pm,cancelToken:"list_content"}).then((res) => {
                let list = res.rows.map((v)=>{
                    v.title = v.title.replace(/\<.*\/\>/g,'');
                    return v;
                })
                this.setState({
                    count:Math.ceil(res.total/st.pageSize),
                    list:list
                })
            }).finally(()=>{
                this.setState({loading:false})
            })
        }
    }

    pageChange = (e,page)=>{
        this.getList({page});
    }

    state = getState();

    UNSAFE_componentWillReceiveProps(nextProps) {
        let state = getState();
        if(state.menuKey != this.state.menuKey){
            this.setState(state,this.getList);
        }
    }

    UNSAFE_componentWillMount(){
        if(!this.state.cate){
            _.his.push("/resouce404")
        }
        this.getList();
    }

    renderList = ()=>{
        let list = this.state.list;
        if(this.state.loading){
            return <Empty type="loading"/>
        }
        if(list.length){
            return (
                <div className="content">
                    {
                        list.map((v,i)=>{
                            return (
                                <div key={i} className="item flr">
                                    <div className="flbox title"><span onClick={this.goDetail(v)}>{v.title}</span></div>
                                    <div className="flone date">&nbsp;&nbsp;{_.MOMENT(v.deployTime||v.createTime).format('YYYY-MM-DD')}</div>
                                </div>
                            )
                        })
                    }
                </div>
            )
        }else{
            return <Empty />
        }
    }

    render(){
        let st = this.state;
        let list = this.state.list;
        return (
            <React.Fragment>
                <Header/>
                <CCarsousel />
                <Container >
                    <Breadcrumbs aria-label="breadcrumb">
                        <a style={{cursor:"pointer"}} onClick={()=>_.his.push("/")}>首页</a>
                        <Typography color="text.primary">{st.menu.text}</Typography>
                    </Breadcrumbs>
                </Container>
                <Container className="list_content flr">
                    <Menu />
                    <div className="flbox rightContent">
                        {this.renderList()}
                        <div className="fl-right">
                            <Pagination
                                count={st.count}
                                onChange={this.pageChange}
                                renderItem={(item) => (
                                    <PaginationItem
                                        {...item}
                                    />
                                )}
                            />
                        </div>
                    </div>
                </Container>
                <Footer/>
            </React.Fragment>
        )
    }
}

export default ListContent;
